<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!--设置viewport-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
    <title>移动端元素移动模仿悬浮球效果</title>
</head>
<style>
    body,html{
        margin: 0;
        padding: 0;
    }
    ol{
        margin: 0;
    }
    .div {
        width: 80px;
        height: 80px;
        position: fixed;
        z-index: 2;
        left: 78vw;
        top:20vh;
        background-color: rgb(129, 185, 231);
        border-radius: 50%;
    }
    li{
        line-height:30px;
    }
    #son{
        width:40px;
        height: 40px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -20px;
        margin-left: -20px;
        background: #fff;
        opacity: 0.72;
        border-radius: 50%;
    }
</style>

<body>
    <div style="background:#c7e2bf;">
        <ol>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
        </ol>
    </div>
    <div class="div" id="div">
        <div id="son"></div>
    </div>
</body>
<script>
    window.onload = function () {
        var flag = 0; //标记是拖曳还是点击
        var oDiv = document.getElementById("div");
        var disX, moveX, L, T, starX, starY, starXEnd, starYEnd;
        oDiv.addEventListener("touchstart", function (e) {
            flag = 0;
            console.log("touchstart",e)
            e.preventDefault(); //阻止触摸时页面的滚动，缩放
            disX = e.touches[0].clientX - this.offsetLeft;
            disY = e.touches[0].clientY - this.offsetTop;
            //手指按下时的坐标
            starX = e.touches[0].clientX;
            starY = e.touches[0].clientY;
            //console.log(disX);
        });
        oDiv.addEventListener("touchmove", function (e) {
            flag = 1;
            console.log("touchmove",e)
            L = e.touches[0].clientX - disX;
            T = e.touches[0].clientY - disY;
            //移动时 当前位置与起始位置之间的差值
            starXEnd = e.touches[0].clientX - starX;
            starYEnd = e.touches[0].clientY - starY;
            //console.log(L);
            if (L < 0) { //限制拖拽的X范围，不能拖出屏幕
                L = 0;
            } else if (L > document.documentElement.clientWidth - this.offsetWidth) {
                L = document.documentElement.clientWidth - this.offsetWidth;
            }
            if (T < 0) { //限制拖拽的Y范围，不能拖出屏幕
                T = 0;
            } else if (T > document.documentElement.clientHeight - this.offsetHeight) {
                T = document.documentElement.clientHeight - this.offsetHeight;
            }
            moveX = L + "px";
            moveY = T + "px";
            //console.log(moveX);
            this.style.left = moveX;
            this.style.top = moveY;
        });
        oDiv.addEventListener("touchend", function (e) {
            //alert(parseInt(moveX))
            //判断滑动方向
            console.log("touchend",e)
            if (flag === 0) { //点击
                console.log("点击")
                //window.location.href = "http://www.baidu.com";
            }
        });


    }
</script>

</html>